<template>
	<el-scrollbar>
		<el-menu class="el-menu-vertical-demo" default-active="1" :default-openeds="['1','2']" @select="handleSelect">
			<el-sub-menu v-for="menu in router.options.routes" :index="menu.index">
				<template #title>
					<el-icon>
						<component :is="menu.icon"></component>
					</el-icon>
					<span>{{menu.title}}</span>
				</template>
				<el-menu-item-group v-for="item in menu.children">
					<el-menu-item :index="item.path">{{item.name}}</el-menu-item>
				</el-menu-item-group>
				
			</el-sub-menu>
		</el-menu>
	</el-scrollbar>
</template>

<script lang="ts" setup>
	//导入图标
	import { Document, Menu as IconMenu, Setting } from '@element-plus/icons-vue'
	//导入路由
	import router from '../common/router.js'
	
	// const handleOpen = (key : string, keyPath : string[]) => {
	// 	console.log(key, keyPath)
	// }
	// const handleClose = (key : string, keyPath : string[]) => {
	// 	console.log(key, keyPath)
	// }
	const handleSelect = (key : string, keyPath : string[]) => {
		console.log(router.options.routes)
		//url跳转
		router.push(key);
		
	}
	
</script>